<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无限分类</title>
</head>
<body>
    <!--
        无限分类的概念：
        title                                   id                  parentId    fullId
        服装                                    1                   null        001
            男装                                2                   1           001,001
            女装                                3                   1           001,002
                春                                4                 3           001,002,001
                夏                                5                 3           001,002,002
                    T                                6              5
                    裙装                              7             5
                        连衣裙                        8             7
                        超短裙                        9             7
                        A字裙                        10             7
                    裤子                             11             5
                秋                                  12              3
                冬                                 13               3
     -->
    <!-- 无限分类的应用场景有哪些？核心字段是什么？基本算法是什么？有哪些实现方式，每种方式的差异是什么？ -->
    <script>
        const treeData = [
            { id: 1, name: '湖北省', parentId: null },
            { id: 2, name: '武汉市', parentId: 1 },
            { id: 3, name: '江岸区', parentId: 2 },
            { id: 4, name: '江汉区', parentId: 2 },
            { id: 5, name: '上海', parentId: null },
            { id: 6, name: '上海市', parentId: 5 },
            { id: 7, name: '浦东区', parentId: 6 },
            { id: 8, name: '松江区', parentId: 6 },
            { id: 9, name: '静安区', parentId: 6 },
            { id: 10, name: '黄埔区', parentId: 6 },
            { id: 11, name: '浙江省', parentId: null },
            { id: 12, name: '杭州市', parentId: 11 },
            { id: 13, name: '西湖区', parentId: 12 },
            { id: 14, name: '江干区', parentId: 12 },
            { id: 15, name: '拱墅区', parentId: 12 },
            { id: 16, name: '萧山区', parentId: 12 },
        ];

        function reverseTree(data, pid) {
            var result = [],
                temp;
            for (var i in data) {
                if (data[i].parentId == pid) {
                    result.push(data[i]);

                    temp = reverseTree(data, data[i].id);
                    // 递归一定需要有跳出机制，否则是死循环
                    if (temp.length > 0) {
                        data[i].children = temp;
                    }
                }
            }
            return result;
        }

        const treeJsonData = reverseTree(treeData, null);
        console.log(treeJsonData);
    </script>
</body>
</html>
